<template>
  <div ref="contactRef" class="contact-float">
    <div v-if="isShow" class="contact-container">
      <a-tooltip
        v-for="(item, key) in contactState"
        :key="key"
        background-color="#ffffff"
        position="left"
        :popup-offset="25"
        :popup-container="contactRef"
        content-class="custom-popper"
      >
        <div v-if="item.length > 0" class="icon-box">
          <i-cf-phone v-if="key === 'phone'" class="icon phone"></i-cf-phone>
          <i-cf-email v-if="key === 'email'" class="icon email"></i-cf-email>
          <i-cf-qq v-if="key === 'qq'" class="icon qq"></i-cf-qq>
          <i-cf-qq-hover
            v-if="key === 'qq'"
            class="icon qq-hover"
          ></i-cf-qq-hover>
          <i-cf-telegram
            v-if="key === 'telegram'"
            class="icon telegram"
          ></i-cf-telegram>
          <i-cf-skype v-if="key === 'skype'" class="icon skype"></i-cf-skype>
        </div>

        <template #content>
          <span class="tooltip-content__title">{{ dealName(key) }}</span>
          <div class="tooltip-content-container">
            <div
              v-for="(ele, index) in item"
              :key="`${key}__${index}`"
              class="tooltip-content__item"
            >
              <div
                v-if="['telegram', 'skype'].includes(key)"
                class="special__item"
                @click="handleOpen(ele)"
              >
                <span class="special__icon">客服{{ (index ?? 0) + 1 }}</span>
                <!-- <span class="special__content">{{ ele }}</span> -->
              </div>
              <div v-else class="normal-container">
                <div class="normal__content">{{ ele }}</div>
                <a-link class="flex-shrink-0" @click="copy(ele)">
                  <i-cf-copy class="mr-1"></i-cf-copy>
                  <span class="text-[#1562fc]">复制</span>
                </a-link>
              </div>
            </div>
          </div>
        </template>
      </a-tooltip>
    </div>
    <div class="jump-top" @click="handleCommand('jump_top')">
      <i-cf-top-arrow class=""></i-cf-top-arrow>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { copy } from '@/utils/'

import type { ContactState } from './common.ts'
interface IProps {
  contactState: ContactState
}
const props = withDefaults(defineProps<IProps>(), {})
const contactRef = ref<HTMLDivElement>()
const isShow = computed(() => {
  let index = 0
  for (const key in props.contactState) {
    index += props.contactState[key as keyof ContactState]?.length
  }
  return index > 0
})
const dealName = computed(() => (name: string) => {
  const map: Record<string, string> = {
    email: '电子邮箱',
    phone: '联系电话',
    qq: 'QQ',
    telegram: 'Telegram',
    skype: 'Skype'
  }
  return map[name]
})
const handleCommand = (command: string) => {
  const map: Record<string, () => void> = {
    custom_server: () => {},
    jump_top: () => {
      scrollToTop()
    }
  }
  map[command] && map[command]()
}
const handleOpen = (url: string) => {
  window.open(url, '_blank')
}
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // smooth滚动效果
  })
}
onMounted(() => {
  window.addEventListener('scroll', scrollToTop())
})
</script>
<style lang="less" scoped>
@commonTransition: all 0.5s ease-in-out 0.2s;
.contact-float {
  @apply flex flex-col gap-y-5 right-6   w-12;
  position: fixed;
  bottom: 24px;
  z-index: 999;
  transition: @commonTransition;
  &.is-hidden {
    opacity: 0;
  }

  .online_customer_server {
    width: 44px;
    height: 44px;
    cursor: pointer;
    &:hover,
    &:active {
      rect {
        fill: #0d51ff;
      }
    }
  }
  .jump-top {
    @apply flex flex-col justify-center items-center w-12 h-12 cursor-pointer bg-white;
    border-radius: 50%;
    border: 1px solid rgba(242, 243, 245, 1);
    box-shadow: 0px 5px 20px 0px rgba(78, 89, 105, 0.08);
    svg {
      color: #80838a;
      transition: all 0.3s;
    }
    &:hover {
      svg {
        color: #1562fc;
      }
    }
  }
  .contact-container {
    @apply ~"flex flex-col px-3 py-[18px] gap-y-2 bg-white rounded-3xl";
    box-shadow:
      0px 5px 15px rgba(218, 221, 231, 0.2),
      0px 5px 35px -2px rgba(218, 221, 231, 0.5);
    .icon-box {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-bottom: 20px;
      cursor: pointer;
      &:last-child {
        margin-bottom: 0;
      }
      .icon {
        color: #80838a;
      }
      .qq-hover {
        display: none;
      }
      &:hover {
        .phone {
          color: #26d366;
        }
        .email {
          color: #ea4335;
        }
        .qq {
          display: none;
        }
        .qq-hover {
          display: inline-block;
        }
        .telegram {
          color: #1296dc;
        }
        .skype {
          color: #0fadf2;
        }
      }
    }
  }
  :deep(.custom-popper) {
    min-width: 182px;
    max-width: 262px;
    padding: 24px 24px 22px 24px !important;
    box-shadow: 0px 5px 35px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    .tooltip-content__title {
      @apply ~"text-base text-black mt-0 ";
    }
    .tooltip-content-container {
      @apply ~"flex flex-col gap-y-3 mt-[14px]";
      .normal-container {
        @apply flex flex-row justify-between items-center gap-x-2;
      }

      .tooltip-content__item,
      .normal__content {
        @apply text-black truncate;
      }
      .special__item {
        @apply flex flex-row gap-x-2 items-center;
        .special__icon {
          @apply ~"text-[#474A59] shrink-0";
        }
        .special__content {
          @apply text-sm text-black truncate;
        }
      }
      .special__item {
        &:hover {
          @apply text-primary cursor-pointer;
          .special__icon,
          .special__content {
            @apply text-primary;
          }
        }
      }
      .normal__content,
      .special__item {
        @apply truncate;
      }
    }
  }
}
</style>
../types/common.js
